<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fetch</title>
</head>
<body>
<p>fetch不是ajax，是为了代替ajax，它是js内置的api，是浏览器天生自带的，不需要引入，ES2018新增的API</p>
<p>GET/HEAD请求不能BODY传参，传参都用POST请求</p>
<p>设置credentials:'include'，不管同源还是跨域请求都带着cookie信息，设置这个会报错</p>
<p>fetch只能异步，基于promise实现的，不能同步使用</p>
<p>不管服务器返回的状态是多少，fetch都不认为是失败（哪怕是4或者5开头的状态码），都执行then中的方法（需要我们自己进行异常抛出处理）</p>
<p>Content-Type头部正确设置（对于JSON应该是application/json，对于表单数据应该是application/x-www-form-urlencoded）</p>
<script>
let base_URL = 'http://localhost:3010'
fetch(base_URL + '/category',{
  method:'GET',
  headers:{
    'content-type':'x-www-form-urlencoded'
  }
}).then(res=>{
  //console.log(res)//这里也会走404失败
  let {status} = res;
  if(/^(4|5)\d{2}$/.test(status)){
    throw new Error('query data is error!');
  }
  return res.json()               //方式1
  // return res.text()            //方式2
}).then(data=>{
  console.log(data)               //方式1
  // console.log(JSON.parse(data))//方式2
}).catch(msg=>{
  console.log(msg)
})

//get请求自己字符串拼接
fetch(base_URL + '/book?id=1').then(res=>{
  let {status} = res;
  if(/^(4|5)\d{2}$/.test(status)){
    throw new Error('query data is error!');
  }
  return res.json()
}).then(data=>{
  console.log(data)
}).catch(msg=>{
  console.log(msg)
})

//post
var payload = 'name=abc&age=9'
var paramHeaders = new Headers({
    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
})
fetch(base_URL + '/add',{
  method:'POST',
  body: payload,
  headers:paramHeaders
}).then(res=>{
  console.log(res)//这里也会走404失败
  let {status} = res;
  if(/^(4|5)\d{2}$/.test(status)){
    throw new Error('query data is error!');
  }
  return res.text()
}).then(data=>{
  console.log(data)
}).catch(msg=>{
  console.log(msg)
})


/*
//本地资源
fetch('package.json',{
  method:'GET',
  headers:{
    'content-type':'x-www-form-urlencoded'
  },
  // credentials:'include'这句不要
}).then(res=>{
  console.log(res)
  //本地资源获取的  res.type -> "basic"
  //接口获取的     res.type -> "cors"
}).catch(msg=>{
  console.log(msg)
})
*/
</script>
</body>
</html>